<!-- 即时聊天样式，不可参与DIY -->
<template>
	<view>
		<template v-if="listState == 'success'">
			<view
				@click="clickRefreshButton"
				class="refresh-button">
				<text class="iconfont icon-switch-filling"></text>
			</view>
			<view class="list-conversation">
				<view class="more" @click="getList('more')">点击加载更多</view>
				<template v-for="item in list">
					<view
						@click="$_To('post/post?pid=' + item.pid)"
						@longpress="longpressOthers(item)"
						class="for-left"
						v-if="item.author.uid != myUid">
						<view class="avatar" @click.stop="$_To('user/user?uid=' + item.author.uid)">
							<image :src="item.author.avatar" mode="widthFix"></image>
						</view>
						<view class="_right">
							<view class="_top">
								<text class="nickname">{{item.author.nickname}}</text>
								<text
									class="roleName"
									:style="item.author.nicknameColor?'color:'+item.author.nicknameColor+';opacity: .4;':''">
									{{item.author.roleName}}
								</text>
								<text class="time">{{item.createdTimeAgo}}</text>
							</view>
							<view class="_bottom">
								<template v-if="!item.files.images.length && !item.files.audios.length">
									<view
										class="content"
										v-if="item.content">
										{{$_filterHtml(item.content)}}
									</view>
								</template>
								<view
									@click.stop="$_To('public/image?url='+item.files.images[0].imageBigUrl)"
									class="file-image"
									v-if="item.files.images.length">
									<image :src="item.files.images[0].imageBigUrl" mode="widthFix"></image>
								</view>
								<view
									class="file-audio"
									v-if="item.files.audios.length">
									<public-audio
										Css="width:350rpx;"
										:Url="item.files.audios[0].audioUrl"></public-audio>
								</view>
								<view
									@click.stop="$_To('post/post?pid='+item.quotedPost.pid)"
									class="quote-post"
									v-if="item.quotedPost">
									<text>引用：{{$_filterHtml(item.quotedPost.content)}}</text>
								</view>
							</view>
						</view>
					</view>
					<view
						@click="$_To('post/post?pid=' + item.pid)"
						@longpress="longpressMy(item)"
						class="for-right"
						v-if="item.author.uid == myUid">
						<view class="_left">
							<view class="_bottom">
								<template v-if="!item.files.images.length && !item.files.audios.length">
									<view
										class="content"
										v-if="item.content">
										{{$_filterHtml(item.content)}}
									</view>
								</template>
								<view
									@click.stop="$_To('public/image?url='+item.files.images[0].imageBigUrl)"
									class="file-image"
									v-if="item.files.images.length">
									<image :src="item.files.images[0].imageBigUrl" mode="widthFix"></image>
								</view>
								<view
									class="file-audio"
									v-if="item.files.audios.length">
									<public-audio
										Css="width:350rpx;"
										:Url="item.files.audios[0].audioUrl"></public-audio>
								</view>
								<view
									@click.stop="$_To('post/post?pid='+item.quotedPost.pid)"
									class="quote-post"
									v-if="item.quotedPost">
									<text>引用：{{$_filterHtml(item.quotedPost.content)}}</text>
								</view>
							</view>
						</view>
						<view class="avatar" @click.stop="$_To('user/user?uid=' + item.author.uid)">
							<image :src="item.author.avatar" mode="widthFix"></image>
						</view>
					</view>
				</template>
			</view>
		</template>
		<public-loading v-if="listState == 'loading'"></public-loading>
		<public-empty v-if="listState == 'empty'"></public-empty>
		<view class="quote" v-if="listQuote">
			<view>
				引用：{{$_filterHtml(listQuoteText)}}
			</view>
			<text
				@click="clikeDeleteQuote"
				class="iconfont icon-close-bold"></text>
		</view>
		<view class="public-comment-box">
			<view style="width: 100%;height: 25rpx;"></view>
			<view class="seize-a-seat"></view>
			<view class="fixed" v-if="$_loginOrNot()">
				<view
					class="button-audio"
					@click="audioButtonState = !audioButtonState">
					<text
						:class="audioButtonState?'iconfont icon-text':'iconfont icon-yuyin'"></text>
				</view>
				<textarea
					v-if="!audioButtonState"
					placeholder="说点什么吧..."
					placeholder-style="font-size: 28rpx;color:#C0C4CC;"
					v-model="content"
					maxlength="-1"
					show-confirm-bar="false"
					cursor-spacing="300"
					:focus="focus"></textarea>
				<view
					@click="clickAudioButton"
					class="voiceButton"
					v-if="audioButtonState">
					{{audioButtonText}}
					{{audioButtonTextSecond?audioButtonTextSecond+'秒':''}}
				</view>
				<view
					@click="clickEmoji"
					class="button"
					style="padding-right: 15rpx;">
					<text class="iconfont icon-smile"></text>
				</view>
				<view
					@click="clickMore"
					class="button"
					style="padding-right:15rpx;"
					v-if="!content">
					<text class="iconfont icon-add-circle"></text>
				</view>
				<view
					@click="clickPost"
					class="sending-button"
					v-if="content">发送</view>
			</view>
			<view class="fixed-emoji" v-if="listEmoji_state">
				<scroll-view scroll-y>
					<template v-if="listEmoji.length">
						<text
							@click="clickEmojiSelect(item)"
							v-for="item in listEmoji">{{item}}</text>
					</template>
					<template v-else>
						<public-loading></public-loading>
					</template>
				</scroll-view>
			</view>
			<template v-if="!$_loginOrNot()">
				<view class="fixed" @click="$_notLoggedInPrompt()">
					<view class="button-audio">
						<text class="iconfont icon-yuyin"></text>
					</view>
					<textarea
						placeholder="未登录 点我登录"
						placeholder-style="font-size: 28rpx;color:#C0C4CC;display: flex;align-items: center;justify-content: center;"
						disabled="false"></textarea>
					<view
						class="button"
						style="padding-right: 15rpx;">
						<text class="iconfont icon-smile"></text>
					</view>
					<view class="button" style="padding-right:22rpx;">
						<text class="iconfont icon-add-circle"></text>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		name:"list-conversation",
		props:{
			listGid:{
				type:String,
				default:""
			}
		},
		data() {
			return {
				list:[],
				listPage:2,
				listState:"loading",
				myUid:"",
				focus:false,
				content:"",
				listEmoji:[],
				listEmoji_state:false,
				listQuote:"",
				listQuoteText:"",
				listQuoteUser:"",
				audioButtonState:false,
				audioButtonTextState:false,
				audioButtonText:"单击 说话",
				audioButtonTextSecond:0,
			};
		},
		// 销毁
		destroyed(){
			clearInterval(this.timer)
		},
		mounted(){
			if(uni.getStorageSync('user')){
				this.myUid = uni.getStorageSync('user').data.detail.uid;
			}
			this.getList();
		},
		methods:{
			getList(more){
				if(more == 'more'){uni.showLoading({ title: "加载中" });}
				this.$_Request(
					"GET","/api/v2/post/list",
					{
						"whitelistKeys":"pid,author.uid,author.username,author.avatar,author.nickname,author.roleName,author.nicknameColor,createdTimeAgo,content,files,quotedPost",
						"gid":this.listGid,
						"page":more == 'more' ? this.listPage : "",
					},
					(res) => {
						if(more == 'more'){
							if(res.data.data.list.length){
								this.list = res.data.data.list.reverse().concat(this.list)
								this.listPage++
								uni.hideLoading();
							}else{
								uni.showToast({
									title: "没有数据啦",
									icon: "none",
									duration: 1000
								});
							}
						}else{
							if(res.data.data.list.length){
								this.list = res.data.data.list.reverse();
								this.listState = "success"
								uni.hideLoading();
								setTimeout(()=>{
									uni.pageScrollTo({
										scrollTop: 99999999,
										duration: 100
									});
								},100);
							}else{
								this.listState = "empty"
							}
						}
					}
				)
			},
			// 长按，我自己
			longpressMy(item){
				uni.showActionSheet({
					itemList: ['撤销','引用'],
					success: (res) => {
						if(res.tapIndex+1 == 1){
							this.revokeMyPublication(item)
						}
						if(res.tapIndex+1 == 2){
							this.quoteOtherPeoplePosts(item)
						}
					}
				});
			},
			// 长按，其他人
			longpressOthers(item){
				uni.showActionSheet({
					itemList: ['引用','收藏本消息'],
					success: (res) => {
						if(res.tapIndex+1 == 1){
							this.quoteOtherPeoplePosts(item)
						}
						if(res.tapIndex+1 == 2){
							this.followThisPost(item)
						}
					}
				});
			},
			// 收藏
			followThisPost(item){
				uni.showLoading();
				this.$_Request(
					"POST","/api/v2/user/mark",
					{
						"interactionType":'follow',
						"markType":"post",
						"fsid":item.pid
					},
					(res) => {
						uni.hideLoading();
						if(res.data.code == 0){
							uni.showToast({
								title:'收藏成功',
								icon:"none",
								duration:1000
							});
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none",
								duration:1000
							});
						}
					}
				)
			},
			// 引用其他人的帖子
			quoteOtherPeoplePosts(item){
				this.listQuote = item.pid;
				this.listQuoteText = item.content;
				this.listQuoteUser = item.author.username;
				setTimeout(()=>{
					uni.pageScrollTo({
						scrollTop: 99999999,
						duration: 100
					});
					this.focus = true;
				},100);
			},
			// 撤销我的发布
			revokeMyPublication(item){
				uni.showModal({
					title: "注意",
					content: "是否撤销？不可恢复哟。",
					success: (res) => {
						if(res.confirm) {
							uni.showLoading({ title: "撤销中..." });
							this.$_Request(
								"DELETE","/api/v2/post/" + item.pid,{},
								(res_) => {
									uni.hideLoading();
									if(res_.data.code == 0){
										this.getList();
									}else{
										uni.showToast({
											title:res_.data.message,
											icon:"none",
											duration:1000
										});
									}
								}
							)
						}
					}
				});
			},
			// 点击表情按钮
			clickEmoji(){
				this.listEmoji_state = !this.listEmoji_state;
				this.focus = false;
				if(this.listEmoji_state){
					uni.request({
						url:this.$_Config() + "Config.json",
						method:'GET',
						success: (res) => {
							this.listEmoji = res.data.allEmoji;
						}
					})
				}
			},
			// 选中表情
			clickEmojiSelect(e){
				this.listEmoji_state = false;
				this.content += e;
				this.focus = true;
			},
			// 更多
			clickMore(){
				uni.showActionSheet({
					itemList: ['图片'],
					success: (res) => {
						// 图片
						if(res.tapIndex == 0){
							this.methodImage()
						}
					}
				});
			},
			// 发表
			clickPost(){
				uni.showLoading();
				// 创建草稿
				this.$_Request(
					"POST","/api/v2/editor/post/create",
					{
						"createType":2
					},
					(res) => {
						if(res.data.code == 0){
							this.draftId = res.data.data.detail.id;
							this.putEditor()
						}else{
							uni.showToast({
								title: res.data.message,
								icon: "none",
								duration: 1000
							});
						}
					}
				)
			},
			// 更新草稿
			putEditor(){
				if(this.listQuoteUser){
					this.listQuoteUser = ` @${this.listQuoteUser} `;
				}
				this.$_Request(
					"PUT","/api/v2/editor/post/" + this.draftId,
					{
						"postQuotePid":this.listQuote,//引用帖子
						"postGid":this.listGid,
						"content":this.content + this.listQuoteUser
					},
					(res) => {
						if(res.data.code == 0){
							this.postEditor()
						}else{
							uni.showToast({
								title: res.data.message,
								icon: "none",
								duration: 1000
							});
						}
					}
				)
			},
			// 发布提交
			postEditor(){
				this.$_Request(
					"POST","/api/v2/editor/post/" + this.draftId, {},
					(res) => {
						if(res.data.code == 0){
							uni.hideLoading();
							this.listQuote = "";
							this.listQuoteText = "";
							this.content = "";
							this.focus = false;
							this.audioButtonState = false;
							this.audioButtonTextState = false;
							this.audioButtonText = "单击 说话";
							this.audioButtonTextSecond = 0;
							this.getList();
						}else{
							uni.showToast({
								title: res.data.message,
								icon: "none",
								duration: 1000
							});
						}
					}
				)
			},
			//删除引用
			clikeDeleteQuote(){
				this.listQuote = "";
				this.listQuoteText = "";
			},
			// 图片操作方法
			methodImage(){
				uni.chooseImage({
					count:1,
					success: (res) => {
						this.imageUpload(res.tempFiles[0].path);
					}
				})
			},
			// 图片上传方法
			imageUpload(img){
				uni.showLoading();
				const _this = this;
				// 创建草稿
				_this.$_Request(
					"POST","/api/v2/editor/post/create",
					{
						"createType":2,
					},
					(res) => {
						if(res.data.code == 0){
							_this.draftId = res.data.data.detail.id;
							uni.uploadFile({
								url: _this.$_Url() + "/api/v2/common/upload-file",
								filePath: img,
								name: "file",
								header: _this.$_FresnsHeader(),
								formData:{
									"usageType":1,
									"tableName":"post_logs",
									"tableColumn":"id",
									"type":"image",
									"tableKey":"",
									"uploadMode":"file",
									"tableId":_this.draftId
								},
								success(res_a) {
									if(JSON.parse(res_a.data).code == 0){
										_this.content = "...有张图"
										_this.focus = false;
										uni.hideLoading();
										_this.putEditor()
									}else{
										uni.showToast({
											title: JSON.parse(res_a.data).message,
											icon: "none",
											duration: 1000
										});
									}
								}
							})
						}else{
							uni.showToast({
								title: res.data.message,
								icon: "none",
								duration: 1000
							});
						}
					}
				)
			},
			// 刷新当前页面按钮
			clickRefreshButton(){
				uni.showLoading();
				this.getList();
			},
			// 点击录音按钮
			clickAudioButton(){
				this.audioButtonTextState = !this.audioButtonTextState;
				if(this.audioButtonTextState){
					uni.getRecorderManager().start();
					this.audioButtonText = "录制中";
					this.audioButtonTextSecond = 1;
					this.timer = setInterval(() => {
						this.audioButtonTextSecond += 1;
						if(this.audioButtonTextSecond == 59){
							this.audioButtonText = '单击 说话';
							this.audioButtonTextSecond = 1;
							this.audioButtonTextState = false;
							clearInterval(this.timer)
							uni.getRecorderManager().stop();
							uni.getRecorderManager().onStop((res) => {
								this.audioUpload(res.tempFilePath)
							});
						}
					}, 1000);
				}else{
					this.audioButtonText = '单击 说话';
					this.audioButtonTextSecond = 0;
					this.audioButtonTextState = false;
					clearInterval(this.timer)
					uni.getRecorderManager().stop();
					uni.getRecorderManager().onStop((res) => {
						this.audioUpload(res.tempFilePath)
					});
				}
			},
			// 音频上传
			audioUpload(audio){
				uni.showLoading();
				const _this = this;
				// 创建草稿
				_this.$_Request(
					"POST","/api/v2/editor/post/create",
					{
						"createType":2,
					},
					(res) => {
						if(res.data.code == 0){
							_this.draftId = res.data.data.detail.id;
							uni.uploadFile({
								url: _this.$_Url() + "/api/v2/common/upload-file",
								filePath: audio,
								name: "file",
								header: _this.$_FresnsHeader(),
								formData:{
									"usageType":1,
									"tableName":"post_logs",
									"tableColumn":"id",
									"type":"audio",
									"tableKey":"",
									"uploadMode":"file",
									"tableId":_this.draftId
								},
								success(res_a) {
									if(JSON.parse(res_a.data).code == 0){
										_this.audioButtonState = false;
										_this.content = "...语音回复"
										_this.focus = false;
										uni.hideLoading();
										_this.putEditor()
									}else{
										uni.showToast({
											title: JSON.parse(res_a.data).message,
											icon: "none",
											duration: 1000
										});
									}
								}
							})
						}else{
							uni.showToast({
								title: res.data.message,
								icon: "none",
								duration: 1000
							});
						}
					}
				)
			},
		},
	}
</script>

<style lang="scss" scoped>
.refresh-button{
	position: fixed;
	bottom: 126rpx;
	right: 25rpx;
	z-index: 10;
	width: 80rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: $HongSe;
	border-radius: 100%;
	text{
		color: #FFF;
		font-size: 40rpx;
		line-height: 40rpx;
	}
}
.list-conversation{
	.for-left{
		display: flex;
		padding: 25rpx 25rpx 0 25rpx;
		.avatar{
			flex-shrink: 0;
			width: 80rpx;
			height: 80rpx;
			overflow: hidden;
			border-radius: 10rpx;
			background: $ZhanWeiSe;
		}
		._right{
			flex: 1;
			margin-left: 25rpx;
			._top{
				font-size: 32rpx;
				line-height: 32rpx;
				display: flex;
				align-items: center;
				.nickname{
					font-size: 22rpx;
					line-height: 22rpx;
				}
				.roleName{
					font-size: 22rpx;
					line-height: 22rpx;
					color: $ZhanWeiSe;
					padding-left: 10rpx;
				}
				.time{
					font-size: 22rpx;
					line-height: 22rpx;
					color: $ZhanWeiSe;
					padding-left: 10rpx;
				}
			}
			._bottom{
				.content{
					background: #FFF;
					padding: 15rpx 20rpx;
					margin-top: 15rpx;
					border-radius: 10rpx;
					display: inline-block;
					box-shadow: 0 0 1rpx $ZhanWeiSe;
					word-break: break-all;
				}
				.file-image{
					background: #FFF;
					padding: 15rpx;
					width: 400rpx;
					margin-top: 15rpx;
					box-shadow: 0 0 1rpx $ZhanWeiSe;
				}
				.file-audio{
					display: inline-block;
					background: #FFF;
					padding: 15rpx;
					margin-top: 15rpx;
					box-shadow: 0 0 1rpx $ZhanWeiSe;
				}
				.quote-post{
					background: $BeiJingSe;
					font-size: 28rpx;
					line-height: 28rpx;
					padding: 20rpx;
					margin-top: 10rpx;
					text{
						display: -webkit-box;
						/*!autoprefixer:off*/
						-webkit-box-orient: vertical;
						/*autoprefixer:on*/
						-webkit-line-clamp: 1;
						overflow: hidden;
						color: $ZhanWeiSe;
					}
				}
			}
		}
	}
	.for-right{
		display: flex;
		padding: 25rpx 25rpx 0 25rpx;
		._left{
			flex: 1;
			margin-right:25rpx;
			._bottom{
				display: flex;
				justify-content: flex-end;
				align-items: flex-end;
				flex-flow: column;
				.content{
					background: #95ec69;
					padding: 15rpx 20rpx;
					border-radius: 10rpx;
					display: inline-block;
					box-shadow: 0 0 1rpx $ZhanWeiSe;
					word-break: break-all;
				}
				.file-image{
					background: #FFF;
					padding: 15rpx;
					width: 50%;
					margin-top: 15rpx;
					box-shadow: 0 0 1rpx $ZhanWeiSe;
				}
				.file-audio{
					display: inline-block;
					background: #FFF;
					padding: 15rpx;
					margin-top: 15rpx;
					box-shadow: 0 0 1rpx $ZhanWeiSe;
				}
				.quote-post{
					background: $BeiJingSe;
					font-size: 28rpx;
					line-height: 28rpx;
					padding: 20rpx;
					margin-top: 10rpx;
					text{
						display: -webkit-box;
						/*!autoprefixer:off*/
						-webkit-box-orient: vertical;
						/*autoprefixer:on*/
						-webkit-line-clamp: 1;
						overflow: hidden;
						color: $ZhanWeiSe;
					}
				}
			}
		}
		.avatar{
			flex-shrink: 0;
			width: 80rpx;
			height: 80rpx;
			overflow: hidden;
			border-radius: 10rpx;
			background: $ZhanWeiSe;
		}
	}
	.more{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		line-height: 28rpx;
		background: #FFF;
		margin: 25rpx 25rpx 0 25rpx;
		padding: 25rpx 0;
		border-radius: 100rpx;
		color: $ZhanWeiSe;
		box-shadow: 0 0 1rpx $ZhanWeiSe;
	}
}
.public-comment-box{
	.seize-a-seat{
		width: 100%;
		height: 101rpx;
	}
	.fixed{
		width: 100%;
		height: 100rpx;
		border-top: 1rpx solid $BianKuangSe;
		background: #f7f7f7;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		.button-audio{
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 0 0 22rpx;
			.icon-yuyin,.icon-text{
				font-size: 60rpx;
				line-height: 60rpx;
			}
		}
		textarea{
			margin: 0 15rpx;
			display: block;
			font-size: 28rpx;
			line-height: 35rpx;
			background: #FFF;
			height: 80rpx;
			padding: 0;
		}
		.voiceButton{
			margin: 0 15rpx;
			height: 80rpx;
			flex: 1;
			background: #FFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.button{
			flex-shrink: 0;
			.iconfont{
				font-size: 60rpx;
				line-height: 60rpx;
			}
		}
		.sending-button{
			width: 150rpx;
			height: 60rpx;
			background: #07c160;
			margin-right: 22rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
			color: #FFF;
			font-size: 28rpx;
			line-height: 28rpx;
		}
	}
	.fixed-emoji{
		width: 600rpx;
		height: 800rpx;
		position: fixed;
		bottom: 150rpx;
		left: 75rpx;
		z-index: 999;
		background: #FFF;
		box-shadow: 0 0 10rpx #999;
		display: flex;
		align-items: center;
		justify-content: center;
		scroll-view{
			width: 560rpx;
			height: 770rpx;
			padding-bottom: 30rpx;
			text{
				display: inline-block;
				font-size: 50rpx;
				line-height: 50rpx;
				padding: 30rpx 10rpx 0 10rpx;
			}
		}
	}
}
.quote{
	margin: 25rpx 25rpx 0 25rpx;
	background: $BeiJingSe;
	border: 1rpx solid $BianKuangSe;
	display: flex;
	align-items: center;
	padding: 20rpx 25rpx;
	border-radius: 10rpx;
	view{
		font-size: 28rpx;
		line-height: 28rpx;
		flex: 1;
		display: -webkit-box;
		/*!autoprefixer:off*/
		-webkit-box-orient: vertical;
		/*autoprefixer:on*/
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
	.icon-close-bold{
		flex-shrink: 0;
		
	}
}
</style>